<template>
  <div>
    <h1>Vue 3 M3U8 Player</h1>
    <div class="player-container">
      <video
        ref="videoPlayer"
        id="video-player"
        class="video-js vjs-default-skin"
        controls
        preload="auto"
        width="600"
        height="300"
      ></video>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

// 定义视频源 URL
const videoUrl = 'https://play.modujx16.com/20241008/4MCO9vpO/index.m3u8';

const videoPlayer = ref(null);
let player = null;

const initPlayer = () => {
  player = videojs(videoPlayer.value, {
    sources: [
      {
        src: videoUrl,  // 这里传入 m3u8 URL
        type: 'application/x-mpegURL',
      },
    ],
    controls: true,
    autoplay: false,
    preload: 'auto',
  });
};

onMounted(() => {
  initPlayer();
});

onBeforeUnmount(() => {
  if (player) {
    player.dispose();
  }
});
</script>

<style scoped>
.player-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
</style>
